<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>SimpleMall Age</title>
    <link type="text/css" rel="stylesheet" href="css/base.css" />
    <link type="text/css" rel="stylesheet" href="css/destine.css" />
    <link type="text/css" rel="stylesheet" href="css/alicdn.css" />
    <script src="js/vue.min.js" type="text/javascript"></script>
    <script src="js/vue-resource.min.js" type="text/javascript"></script>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>

</head>
<body>
<div id="app">
    <header>
        <div class="head-menu">
            <i></i>
            <h2>出生年月</h2>
        </div>
    </header>
    <section id="heightPage">
       <div class="age-box">
          <div class="age-tab">
            <span v-for="(item, index) in ageType" :class="{actived: index == dindex}" @click="ageTypes(index)">{{item}}</span>
          </div>
          <div class="cell-box">
              <ul class="year-ul" v-show="0 == dindex">
                  <li v-for="item in years" :key="item" class="year-item">
                      <div class="year-name">
                        <h3>{{item.era}}</h3>
                        <p>后</p>
                        <span></span>
                      </div>
                      <ul class="year-sub">
                          <li v-for="(subItem, index) in item.epoch">{{subItem}}</li>
                      </ul>
                  </li>
              </ul>
              <ul id="month" class="year-sub" v-show="1 == dindex">
                  <li v-for="subItem in month">{{subItem}}</li>
              </ul>
          </div>

       </div>
    </section>
</div>
<script type="text/javascript">
var app = new Vue({
    el: '#app',
    data: {
      dindex: 0,
      dloen: true,
      ageType: ['年', '月'],
      years:[
          {era: '30', epoch: [1930, 1931, 1932, 1933, 1934, 1935, 1936, 1937, 1938, 1939]},
          {era: '40', epoch: [1940, 1941, 1942, 1943, 1944, 1945, 1946, 1947, 1948, 1949]},
          {era: '50', epoch: [1950, 1951, 1952, 1953, 1954, 1955, 1956, 1957, 1958, 1959]},
          {era: '60', epoch: [1960, 1961, 1962, 1963, 1964, 1965, 1966, 1967, 1968, 1969]},
          {era: '70', epoch: [1970, 1971, 1972, 1973, 1974, 1975, 1976, 1977, 1978, 1979]},
          {era: '80', epoch: [1980, 1981, 1982, 1983, 1984, 1985, 1986, 1987, 1988, 1989]},
          {era: '90', epoch: [1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999]},
          {era: '00', epoch: [2000]}
      ],
      month:[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
      height:[
          {space: '130', spaceList:[130, 131, 132, 133, 134, 135, 136, 137, 138, 139]},
          {space: '140', spaceList:[140, 141, 142, 143, 144, 145, 146, 147, 148, 149]},
          {space: '150', spaceList:[150, 151, 152, 153, 154, 155, 156, 157, 158, 159]},
          {space: '160', spaceList:[160, 161, 162, 163, 164, 165, 166, 167, 168, 169]},
          {space: '170', spaceList:[170, 171, 172, 173, 174, 175, 176, 177, 178, 179]},
          {space: '180', spaceList:[180, 181, 182, 183, 184, 185, 186, 187, 188, 189]},
          {space: '190', spaceList:[190, 191, 192, 193, 194, 195, 196, 197, 198, 199]},
          {space: '200', spaceList:[200, 201, 202, 203, 204, 205, 206, 207, 208, 209]},
          {space: '210', spaceList:[210, 211, 212, 213, 214, 245, 246, 247, 248, 249]}
      ]
    },
    methods: {
       ageTypes:function (str) {
         this.dindex = str
       }
    }
})

$('.year-ul .year-sub').each(function (index, elm) {
  $(elm).find('li').click(function () {
    var that = $(this);
    var years = that.text();
    that.addClass('actived').siblings().removeAttr('class').parent().parent().siblings().find('li').removeAttr('class');
    localStorage.setItem('years', years);
    app.dindex = 1;
      if( app.dindex == 1){
          $('#month>li').click(function () {
              var $that = $(this);
              var month = $that.text();
              $that.addClass('actived').siblings().removeAttr('class');
              localStorage.setItem('month', month);
              window.location.href = 'height.html';
          })
      }
  });
})




</script>
</body>
</html>